<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>克服粗心</title>
    <script src="vue.js"></script>
    <style>
        .container {
            width: 100%;
            text-align: center;
            margin: 275px auto auto;
        }

        button{
            width: 300px;
            height: 75px;
            background-color: #07C160;
            color: #fff;
            border: none;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            font-size: 25px;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>计算粗心专用训练工具</h1>
    <div id="app">
        <h2>({{a}}×{{b}}+{{c}}-{{d}})÷{{e}} = {{ans1}}</h2>
        <h2>({{aa}}+{{bb}}-{{cc}})×{{dd}}÷{{ee}} = {{ans2}}</h2>
        <button v-on:click="refresh">再来两题</button>
    </div>
</div>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      a: rand(),
      b: rand(),
      c: rand(),
      d: rand(),
      e: rand(),
      aa: rand(),
      bb: rand(),
      cc: rand(),
      dd: rand(),
      ee: rand(),
    },
    computed: {
      ans1: function () { return (this.a * this.b + this.c - this.d) / this.e},
      ans2: function () {return (this.aa + this.bb - this.cc) * this.dd / this.ee }
    },
    methods: {
      refresh: function () {
        this.a = rand()
        this.b = rand()
        this.c = rand()
        this.d = rand()
        this.e = rand()
        this.aa = rand()
        this.bb = rand()
        this.cc = rand()
        this.dd = rand()
        this.ee = rand()
      }
    }
  })

  function rand () {
    return Math.floor(Math.random() * (1000 - 100)) + 100
  }
</script>
</body>
</html>